var MaterialSetting = function () {
  var template = /* html */ `
    <div class="material-setting">
      <div class="material-setting-btns">
        <el-button size="medium" type="primary" @click="ensure">设置物料</el-button>
        <el-button size="medium" type="primary" @click="clearMaterial">清除物料</el-button>
      </div>
      <div class="material-setting-content">
        <div v-for="material in materialList" :key="'lineNo_'+material.lineNo" class="material-setting-item">
          <div>
            <el-radio v-model="lineNo" :label="material.lineNo">序号{{material.lineNo}}</el-radio>
          </div>
          <div class="material-setting-info">
            <el-table fit stripe border :data="material.data" style="width: 100%">
              <el-table-column label="物料类型" prop="materialType" min-width="120px" header-align="center"></el-table-column>
              <el-table-column label="仓位" min-width="100px" header-align="center">
                <template slot-scope="scope">
                  <span>{{i18n.getMsg('bomBusiness.defaultWarehouse.'+scope.row.defaultWarehouse)}}</span>
                </template>
              </el-table-column>
              <el-table-column label="物料名称" prop="materialName" min-width="120px" header-align="center"></el-table-column>
              <el-table-column label="物料规格" prop="materialModel" min-width="120px" header-align="center"></el-table-column>
              <el-table-column label="供应商" prop="materialProviderName" min-width="120px" header-align="center"></el-table-column>
              <el-table-column label="色号" prop="materialColor" min-width="120px" header-align="center"></el-table-column>
              <el-table-column label="颜色描述" prop="materialColorDescription" min-width="120px" header-align="center"></el-table-column>
            </el-table>
          </div>
        </div>
      </div>
    </div>
  `;

  return {
    props: {
      order: {
        type: Object,
        required: true
      },
      orderForm: {
        type: Object,
        required: true
      }
    },

    data: function () {
      return {
        lineNo: this.order.lineNo,
        materialList: this.getMaterialList()
      };
    },

    methods: {
      getMaterialList: function () {
        var orderForm = this.orderForm;
        var materialData = orderForm.materialData;
        var materialList = [];
        for (var lineNo in materialData) {
          var data = materialData[lineNo];
          data = _.values(data);
          materialList.push({
            lineNo: lineNo,
            data: data
          });
        }
        materialList = _.orderBy(materialList, [function (obj) {
          var lineNo = obj.lineNo;
          return Number(lineNo);
        }], ['asc']);
        return materialList;
      },

      ensure: function () {
        var lineNo = this.lineNo;
        if (lineNo === undefined) {
          this.$alert('请选择要设置的物料', '信息');
          return;
        }

        var order = this.order;
        var orderForm = this.orderForm;
        var orderDataList = orderForm.orderDataList;
        for (var i = 0; i < orderDataList.length; i++) {
          var orderData = orderDataList[i];
          if (orderData === order) {
            continue;
          }
          if (orderData.lineNo === lineNo) {
            this.$alert(`序号${lineNo}的物料已经设置`, '信息');
            return;
          }
        }
        order.lineNo = lineNo;
        this.$emit('setting-success', lineNo);
      },

      clearMaterial: function () {
        this.order.lineNo = undefined;
        this.$emit('setting-success', undefined);
      }
    },

    template: template
  };
}();
